<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="饮食评估" left-arrow @click-left="$router.go(-1)" />
    <!-- 选项开始 -->
    <div class="item">
     <!-- 第二题 -->
    <van-radio-group v-model="second">
      <p>1.你的性别是?</p>
      <van-cell-group >
        <van-cell title="男" clickable @click="second = '1'">
          <template #right-icon>
            <van-radio name="1" />
          </template>
        </van-cell>
        <van-cell title="女" clickable @click="second = '2'">
          <template #right-icon>
            <van-radio name="2" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group> 
    
      <!-- 第一题 -->
      <van-radio-group v-model="first">
      <p>2.过去12个月内,您通常一天吃几顿饭?</p>
      <van-cell-group >
        <van-cell title="一顿一下" clickable @click="first = '1'">
          <template #right-icon>
            <van-radio name="1" />
          </template>
        </van-cell>
        <van-cell title="1-2顿" clickable @click="first = '2'">
          <template #right-icon>
            <van-radio name="2" />
          </template>
        </van-cell>
        <van-cell title="1-3顿" clickable @click="first = '3'">
          <template #right-icon>
            <van-radio name="3" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <!-- 第三题 -->
    <van-radio-group v-model="third">
      <p>3.您通常在哪里吃饭?</p>
      <van-cell-group >
        <van-cell title="家中" clickable @click="third = '1'">
          <template #right-icon>
            <van-radio name="1" />
          </template>
        </van-cell>
        <van-cell title="食堂" clickable @click="third = '2'">
          <template #right-icon>
            <van-radio name="2" />
          </template>
        </van-cell>
        <van-cell title="餐馆" clickable @click="third = '3'">
          <template #right-icon>
            <van-radio name="3" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group> 
    <!-- 第四题 -->
    <van-radio-group v-model="fourth">
      <p>4.过去12个月,您喝过酒么?</p>
      <van-cell-group >
        <van-cell title="喝过(在过去30天以前)" clickable @click="fourth = '1'">
          <template #right-icon>
            <van-radio name="1" />
          </template>
        </van-cell>
        <van-cell title="喝过(在30天内)" clickable @click="fourth = '2'">
          <template #right-icon>
            <van-radio name="2" />
          </template>
        </van-cell>
        <van-cell title="没有" clickable @click="fourth = '3'">
          <template #right-icon>
            <van-radio name="3" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group> <!-- 第五题 -->
    <van-radio-group v-model="fifth">
      <p>5.过去30天里，您一次喝酒超过3两高度白酒，或4两低度白酒，或3瓶半啤酒，或6个易拉罐啤酒，或9两黄酒/米酒，或1斤8两葡萄酒的次数？</p>
      <van-cell-group>
        <van-cell title="1-2次" clickable @click="fifth = '1'">
          <template #right-icon>
            <van-radio name="1" />
          </template>
        </van-cell>
        <van-cell title="2-3顿" clickable @click="fifth = '2'">
          <template #right-icon>
            <van-radio name="2" />
          </template>
        </van-cell>
        <van-cell title="3-5顿" clickable @click="fifth = '3'">
          <template #right-icon>
            <van-radio name="3" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
     <button @click="go">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      first: '',
      second: '',
      third: '',
      fourth: '',
      fifth: '',
    }
  },
  methods: {
    go() {
      // 此处填写转跳路径
      this.$router.push('/foodresult')
    }
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #1074ff;

  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}
.item{
  border-radius: 15px;
    box-shadow: 0 1px 1px hsl(0deg, 0%, 89%);
}
p{
  text-indent: 0.5em;
}
button{
  display: block;
  margin: 0 auto;
  color: #fff;
  margin-top: 20px;
  border: none;
  width: 85%;
  height: 40px;
  border-radius: 15px;
  background-color: #1074ff;                           
}
// color 1074ff
</style>